<script>
	let active = false;
	let bar = 'china';

	function foo(node, bar) {
		// node已挂载在DOM中
		console.log(node);

		return {
			update(bar) {
				console.log(bar);

				// `bar` 已发生变更
			},

			destroy() {
				// node已从DOM中移除
			}
		};
	}
	import { fade, fly } from 'svelte/transition';
	import { elasticOut } from 'svelte/easing';
	let status = 'waiting...';
	function whoosh(node, params) {
		const existingTransform = getComputedStyle(node).transform.replace('none', '');
		// console.log(existingTransform);

		return {
			delay: params.delay || 0,
			duration: params.duration || 800,
			easing: params.easing || elasticOut,
			css: (t) => {
				// const eased = elasticOut(t);

				return `
					transform:${existingTransform}  scale(${t}) rotate(${t * 1080}deg);
					color: hsl(
						${~~(t * 360)},
						${Math.min(100, 1000 - 1000 * t)}%,
						${Math.min(50, 500 - 500 * t)}%
					);`;
			}
			// css: (t, u) => `transform: ${existingTransform} scale(${t}) `,
		};
	}
</script>

<!-- <div class="py-5 my-5 bg-gray-200 rounded-lg "> -->
<div
	class={active
		? 'w-full  bg-yellow-300 text-green-400 h-20  justify-center items-center flex ease-in-out transition-transform'
		: 'w-full bg-blue-300 text-yellow-400 h-20 justify-center items-center flex'}
	on:click={() => (active = !active)}
>
	点我弹出
</div>
<div class:active>
	<p>status: {status}</p>
</div>
<div use:foo={bar}>{bar}</div>
{#if active}
	<div class:active in:fade out:whoosh>
		<p transition:fade>fades in and out when x or y change</p>

		<p transition:fade|local>fades in and out only when y changes</p>
	</div>
{/if}
{#if active}
	<p
		transition:fly|local={{ x: 200, duration: 800 }}
		on:introstart={() => (status = 'intro started')}
		on:outrostart={() => (status = 'outro started')}
		on:introend={() => (status = 'intro ended')}
		on:outroend={() => (status = 'outro ended')}
	>
		Flies in and out
	</p>
{/if}

<!-- </div> -->

<style>
	.active {
		background-color: greenyellow;
		margin-top: 5px;
	}
</style>
